<template>
  <div class="flex-column">
    <div class="flex justify-between flex-row-reverse">
      <div class="text-right flex flex-wrap justify-end">
        <el-select
          v-model="queryData.status"
          clearable
          style="width: 200px"
          class="mr-10 mb-10"
          :placeholder="$t('STATE')"
        >
          <el-option
            v-for="item in dictList.MIGRATION_STATUS"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <el-input
          v-model.trim="queryData.planName"
          style="width: 200px"
          class="mr-10 mb-10"
          maxlength="32"
          clearable
          :placeholder="$t('MIGRATION_NAME')"
          @keyup.enter.native="$debounce(search)"
        />
        <el-input
          v-model.trim="queryData.bizName"
          style="width: 200px"
          class="mr-10 mb-10"
          maxlength="32"
          clearable
          :placeholder="$t('SERVICE_NAME')"
          @keyup.enter.native="$debounce(search)"
        />
        <el-input
          v-model.trim="queryData.nodeName"
          class="mb-10"
          style="width: 200px"
          maxlength="32"
          clearable
          :placeholder="$t('NODE_NAME')"
          @keyup.enter.native="$debounce(search)"
        />
        <el-button type="primary" class="ml-10 mb-10" @click="$debounce(search)">{{
          $t('QUERY')
        }}</el-button>
      </div>
      <div class="flex mb-10">
        <el-button v-if="permission.add" type="primary" icon="el-icon-plus" @click="add">{{
          $t('ADD')
        }}</el-button>
      </div>
    </div>
    <TableView
      :table-header="tableHeader"
      :table-data="tableData"
      :page-data="pageData"
      :operate-width="280"
      @operate="operate"
      @pageChange="pageChange"
    />
    <plan-detail
      :visible="detailVisible"
      :plan-data="rowData"
      :operate-type="operateType"
      :title="dialogTitle"
      @close="detailVisible = false"
      @reload="loadData"
    />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import linkMigration from '@/api/oen/LinkMigrationApi'
  import PlanDetail from './PlanDetail'
  import TableView from '@/components/TableView'
  let searchData = {} // 查询参数 只有点了查询有效
  export default {
    name: 'Cutover',
    components: {
      PlanDetail,
      TableView
    },
    data() {
      return {
        portInfoVisible: false,
        pageData: {
          page: 1,
          size: 20,
          total: 0
        },
        queryData: {
          bizName: '',
          nodeName: '',
          planName: '',
          status: ''
        },
        importVisible: false,
        tableData: [],
        rowData: {},
        dialogTitle: '',
        operateType: 'add',
        detailVisible: false,
        tableHeader: [
          {
            label: 'MIGRATION_NAME',
            prop: 'planName',
            width: '150',
            configType: 'default'
          },
          {
            label: 'SERVICE_NAME',
            prop: 'bizOpen.bizName',
            width: '150',
            configType: 'default'
          },
          {
            label: 'A_END_STATION_NAME',
            prop: 'startStationName',
            width: '150'
          },
          {
            label: 'ANODE',
            prop: 'startNode.nodeName'
          },
          {
            label: 'A_END_NODE_PORT',
            prop: 'startPort.portName',
            width: '110'
          },
          {
            label: 'Z_END_STATION_NAME',
            prop: 'endStationName'
          },
          {
            label: 'ZNODE',
            prop: 'endNode.nodeName'
          },
          {
            label: 'Z_END_NODE_PORT',
            prop: 'endPort.portName',
            width: '110'
          },
          {
            label: 'STATE',
            prop: 'statusName'
          },
          {
            label: 'PLAN_START_TIME',
            prop: 'planExecuteTime',
            width: 140
          },
          {
            label: 'ACTUAL_START_TIME',
            prop: 'actualStartTime',
            width: 140
          },
          {
            label: 'ACTUAL_END_TIME',
            prop: 'actualEndTime',
            width: 140
          }
        ]
      }
    },
    computed: {
      ...mapGetters(['dictList', 'baseRegionList', 'dictMap']),
      permission() {
        return this.$store.getters.getAuthData('link:cutover')
      }
    },
    activated() {
      this.loadData()
    },
    methods: {
      loadData() {
        linkMigration.queryPage(searchData, { ...this.pageData }).then(res => {
          const list = res.list || []
          this.tableData = list.map(i => {
            i.startStationName = this.getRegionName(i.startStationId)
            i.endStationName = this.getRegionName(i.endStationId)
            i.startRoomName = this.getRegionName(i.startRoomId)
            i.endRoomName = this.getRegionName(i.endRoomId)
            i.statusName = this.dictMap.MIGRATION_STATUS[i.status]
            i.btns = this.getBtns(i)
            return i
          })
          this.pageData.total = res.total
        })
      },
      getBtns(row) {
        const rowStatus = row.status
        const btns = [
          {
            key: 'view',
            show: ['MIGRATION_READER', 'MIGRATION_RUNNING'].includes(rowStatus),
            label: 'VIEWING_MIGRATION_PLAN'
          },
          {
            key: 'manual',
            show:
              this.permission.manualcompleted &&
              this.regionAuthor(row) &&
              !row.manualResult &&
              ['MIGRATION_READER', 'ROLLBACK_READER'].includes(rowStatus),
            label: 'MANUAL_COMPLETED'
          },
          {
            key: 'result',
            show:
              this.permission.viewresult &&
              this.regionAuthor(row) &&
              ['MIGRATION_SUCCESS', 'ROLLBACK_SUCCESS'].includes(rowStatus),
            label: 'VIEW_RESULT'
          },
          {
            key: 'viewRollback',
            show:
              this.permission.rollbackplan &&
              this.regionAuthor(row) &&
              ['ROLLBACK_READER', 'ROLLBACK_RUNNING'].includes(rowStatus),
            label: 'VIEW_ROLLBACK_PLAN'
          },
          {
            key: 'rollback',
            show:
              this.permission.rollback &&
              this.regionAuthor(row) &&
              row.status === 'MIGRATION_SUCCESS',
            label: 'ROLLBACK'
          },
          {
            key: 'del',
            show: this.getDelBtn(row),
            label: 'DEL'
          }
        ]
        return btns.filter(i => i.show)
      },
      getDelBtn(row) {
        return (
          this.permission.del &&
          this.regionAuthor(row) &&
          ['MIGRATION_READER', 'MIGRATION_SUCCESS', 'ROLLBACK_READER', 'ROLLBACK_FAIL'].includes(
            row.status
          )
        )
      },
      operate(data) {
        if (data.type === 'del') {
          this.del(data.data)
        } else {
          this.operateFunc(data.data, data.type)
        }
      },
      // 获取区域/站点/机房
      getRegionName(stationId) {
        const stationData = this.baseRegionList.find(i => i.regionId === stationId)
        return stationData ? stationData.regionName : ''
      },
      // 关键字搜索
      search() {
        this.pageData.page = 1
        this.queryData.status = this.queryData.status || null
        searchData = {
          ...this.queryData
        }
        this.loadData()
      },
      // 查看详情
      operateFunc(row, type) {
        const dialogTitle = {
          view: this.$t('VIEWING_MIGRATION_PLAN'),
          manual: this.$t('MANUAL_OPERATION_COMPLETED'),
          rollback: this.$t('CONFIRM_ROLLBACK'),
          viewRollback: this.$t('VIEW_ROLLBACK_PLAN')
        }
        this.operateType = type
        if (type === 'manual' && row.status === 'ROLLBACK_READER') {
          this.operateType = 'rollbackManual'
        }
        this.dialogTitle = dialogTitle[type]
        linkMigration.getPlanId({ planId: row.planId }).then(res => {
          this.rowData = res
          this.detailVisible = true
        })
      },
      // 顶部添加
      add() {
        this.$emit('add')
      },
      // 删除
      del(row) {
        this.$confirm(this.$t('DELETE_MIGRATION_PLAN', { msg: row.planName }), {
          type: 'warning'
        })
          .then(() => {
            linkMigration.delete({ id: row.id }).then(res => {
              if (res) {
                this.$message.success(this.$t('DELETE_SUCCESS'))
                this.loadData(true)
              }
            })
          })
          .catch(() => {})
      },
      pageChange(data) {
        this.pageData = data
        this.loadData()
      },
      // 区域权限判断控制
      regionAuthor(row) {
        return (
          (this.baseRegionList.some(i => i.regionId === row.startStationId) &&
            this.baseRegionList.some(i => i.regionId === row.endStationId)) ||
          this.getUserId === 'admin'
        )
      }
    }
  }
</script>
